<template>
  <div class="upload-need-file">
    <el-dialog
      title="上传需求文档"
      v-model="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="form" ref="formRef" :rules="rules">
        <el-form-item label="项目名称" prop="project_name">
          <el-input v-model="form.project_name" placeholder="请输入项目名称"></el-input>
        </el-form-item>
        <el-form-item label="版本号" prop="version">
          <el-input v-model="form.version" placeholder="请输入版本号"></el-input>
        </el-form-item>
        <el-form-item label="文档名称" prop="file_name">
          <el-input v-model="form.file_name" placeholder="请输入文档名称"></el-input>
        </el-form-item>
        <el-form-item label="文档" prop="file">
          <el-upload
            class="upload-demo"
            action="#"
            :auto-upload="false"
            :on-change="handleFileChange"
          >
            <el-button type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="更新功能" prop="notes">
          <el-input
            type="textarea"
            v-model="form.notes"
            placeholder="请输入更新功能描述"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const dialogVisible = ref(false)
const formRef = ref(null)

const form = reactive({
  project_name: '',
  version: '',
  file_name: '',
  file: null,
  notes: ''
})

const rules = {
  project_name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  file_name: [{ required: true, message: '请输入文档名称', trigger: 'blur' }],
  file: [{ required: true, message: '请选择文件', trigger: 'change' }]
}

const handleClose = () => {
  dialogVisible.value = false
  form.project_name = ''
  form.version = ''
  form.file_name = ''
  form.file = null
  form.notes = ''
}

const handleFileChange = (file) => {
  form.file = file.raw
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    
    const formData = new FormData()
    formData.append('project_name', form.project_name)
    formData.append('file_name', form.file_name)
    formData.append('file_path', form.file.name)
    formData.append('file', form.file)
    formData.append('notes', form.notes)

    // 打印发送的数据，用于调试
    console.log('发送的表单数据：')
    for (let pair of formData.entries()) {
      console.log(pair[0] + ': ' + pair[1])
    }

    const response = await axios.post('http://localhost:8000/create_api_project/', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })

    console.log('服务器响应：', response.data)

    if (response.data.code === 200) {
      ElMessage.success('上传成功')
      handleClose()
      // 可以触发刷新列表的事件
    } else {
      ElMessage.error(response.data.msg || '上传失败')
    }
  } catch (error) {
    console.error('请求错误：', error)
    if (error.response) {
      console.error('错误响应：', error.response.data)
      ElMessage.error(error.response.data.msg || '上传失败')
    } else {
      ElMessage.error('表单验证失败，请检查必填项')
    }
  }
}

// 暴露方法供父组件调用
defineExpose({
  dialogVisible
})
</script>

<style scoped>
.upload-need-file {
  .dialog-footer {
    padding-top: 20px;
    text-align: right;
  }
}
</style> 